<template>
  <div class="wrap">
    <div class="header">
      <div>
        <div>
          <el-select v-model="queryParams.type" placeholder="请选择" @change="changeOption">
            <el-option value="" :label="$t('common.全部类型')"></el-option>
            <el-option :value="1" :label="$t('labelOrder.入库贴标')"></el-option>
            <el-option :value="2" :label="$t('labelOrder.调货贴标')"></el-option>
            <el-option :value="3" :label="$t('labelOrder.送仓贴标')"></el-option>
          </el-select>
        </div>
      </div>




    </div>
    <div class="content mgt20">
      <el-tabs v-model="queryParams.status" @tab-click="changeOption">
        <el-tab-pane :label="`${$t('labelOrder.待确认')}(${attrNumber(tabTypeNum.waitConfirmNum)})`" name="0"></el-tab-pane>
        <el-tab-pane :label="`${$t('labelOrder.待贴标')}(${attrNumber(tabTypeNum.waitStickerNum)})`" name="1"></el-tab-pane>
        <el-tab-pane :label="`${$t('labelOrder.已贴标')}(${attrNumber(tabTypeNum.finishNum)})`" name="2"></el-tab-pane>
      </el-tabs>

      <div class="table">
        <el-table
          border
          :data="tableData"
          v-tableHeight="{bottomOffset: 80}"
          height="100px"
          ref="tableData"
        >
          <el-table-column
            :label="$t('table.贴标单号')"
            prop="labelNo"
            align="center"
            min-width="250"
            show-overflow-tooltip
            fixed
          >
            <template slot-scope="{row}">
              <diy-link @click="jumpLabelOrderInfo(row.id)">{{row.labelNo}}</diy-link>
            </template>
          </el-table-column>
          <template v-if="queryParams.status !== '2'">
            <el-table-column
              :label="$t('table.预计贴标SKU种数')"
              prop="exSkuNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                {{row.exSkuNum}}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.预计贴标商品总数量')"
              prop="exGoodsNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                {{row.exGoodsNum}}
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :label="$t('table.实际贴标SKU种数')"
              prop="rlSkuNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                <span :class="[row.rlSkuNum === row.exSkuNum ? '' : 'font-red']">{{row.rlSkuNum}}</span>
                /
                <span>{{row.exSkuNum}}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.实际贴标商品总数量')"
              prop="rlGoodsNum"
              align="center"
              min-width="150"
            >
              <template v-slot="{row}">
                <span :class="[row.rlGoodsNum === row.exGoodsNum ? '' : 'font-red']">{{row.rlGoodsNum}}</span>
                /
                <span>{{row.exGoodsNum}}</span>
              </template>
            </el-table-column>
          </template>

          <el-table-column
            :label="$t('table.贴SKU标单价（元）')"
            prop="labelFee"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <template v-if="queryParams.status !== '2'">
            <el-table-column
              :label="$t('table.预计贴SKU标费用（元）')"
              prop="exTotalFee"
              align="center"
              min-width="150"
            >
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :label="$t('table.实际贴SKU标费用（元）')"
              prop="rlTotalFee"
              align="center"
              min-width="150"
            >
            </el-table-column>
          </template>

          <el-table-column
            :label="$t('table.贴标类型')"
            prop="type"
            align="center"
            min-width="150"
          >
            <template v-slot="{row}">
              {{getLabelTypeStr(row.type)}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.确认时间')"
            prop="confirmTime"
            align="center"
            width="150"
          >
            <template v-slot="{row}">
              {{row.confirmTime || '-'}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.完成时间')"
            prop="finishTime"
            align="center"
            width="150"
          >
            <template v-slot="{row}">
              {{row.finishTime || '-'}}
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.operate')"
            prop="operate"
            align="left"
            width="300"
            fixed="right"
          >
            <template v-slot="{row}">
              <el-button type="view" @click="jumpLabelOrderInfo(row.id)">{{$t('common.view')}}</el-button>
            </template>
          </el-table-column>



        </el-table>
        <div v-if="queryParams.status === '0'">
          <div class="font-grey mgt10" style="font-size: 13px">
            <!--      {{ $t('labelOrder.请上传本次贴标 Listing ID与SKU商品的官方SKU标以供运营人员下载打印粘贴') }}-->
<!--            <div>{{$t('labelOrder.系统标的SKU仅需确认贴标的数量')}}</div>-->
<!--            <div>{{$t('labelOrder.官方仓的SKU需要确认数量以及上传官方标（若之前没有上传)')}}</div>-->
            <div>{{$t('labelOrder.以上工单均需要您确认后，才会显示在仓库后台并交由仓管人员为您进行贴标/换标/调货/送仓等服务')}}</div>
          </div>
        </div>

        <div class="page-wrap mgt10">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :current-page.sync="queryParams.page"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="getData"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {attrNumber} from "@/utils/common";
import {jumpLabelOrderInfo, jumpMiddleInfo} from "@/utils/jumpView";
import {getLabelList} from "@/api/labelOrder";
import {getLabelTypeStr} from "../../utils/labelOrder";

export default {
  name: "labelList",
  data(){
    return {
      loading: false,
      queryParams: {
        page: 1,
        pageSize: 20,
        status: '0',
        type: '',
      },
      total: 0,
      tabTypeNum: {
        waitConfirmNum: 0,
        waitStickerNum: 0,
        finishNum: 0,
      },
      tableData: [],
    }
  },
  created() {
    this.getData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods: {
    getLabelTypeStr,
    jumpMiddleInfo,
    jumpLabelOrderInfo,
    attrNumber,
    getData() {
      this.loading = true
      getLabelList(this.queryParams)
        .then(res => {
          this.loading = false
          this.tableData = res.data
          this.total = res.info.total

          this.tabTypeNum.waitConfirmNum = res.info.waitConfirmNum;
          this.tabTypeNum.waitStickerNum = res.info.waitStickerNum;
          this.tabTypeNum.finishNum = res.info.finishNum;
        })
    },
    changeOption() {
      this.queryParams.page = 1;
      this.getData();
    },
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 20px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0px 0 0;
  }

}
</style>
